<template>
  <view class="bg-gray-50 min-h-screen">
    <!-- 顶部导航栏 -->
    <view class="fixed top-0 left-0 right-0 bg-white shadow shadow-shadow-md-md z-10">
      <view class="container mx-auto px-4 py-3 flex flex items="flex items-center justify-between">
        <view class="flex items-center">
          <text class="text-xl font-semibold text-primary">小白财务助手</text>
        </view>
        <view class="flex items-center space-x-4">
          <button class="relative p-2 text-gray-500 hover:text-primary transition-all duration-300" @click="showNotification">
            <text class="fa fa-bell-o text-lg"></text>
            <view class="absolute top-1 right-1 w-2 h-2 bg-danger rounded-full"></view>
          </button>
          <button class="p-2 text-gray-500 hover:text-primary transition-all duration-300" @click="showSettings">
            <text class="fa fa-cog text-lg"></text>
          </button>
        </view>
      </view>
    </view>

    <!-- 主内容区 -->
    <view class="container mx-auto px-4 pt-16 pb-24">
      <!-- 公司信息和时间筛选 -->
      <view class="py-4">
        <view class="flex items justify-between-between items-center mb-2">
          <view>
            <text class="text-lg font-medium-medium">全栈科技有限公司</text>
            <view class="text-sm text-gray-500">统一社会信用代码: 91110000XXXXXXXXXX</view>
          </view>
          <button class="text-sm text-primary flex items-center" @click="switchCompany">
            <text>切换</text>
            <text class="fa fa-exchange ml-1"></text>
          </button>
        </view>
        <view class="flex justify-between items-center bg-white rounded-lg shadow-card p-3">
          <view class="text-sm text-gray-500">
            <text>申报期间: </text>
            <text class="text-dark font-medium-medium">2024年10月01日-2024年10月31日</text>
          </view>
          <view class="flex items-center">
            <text class="text-sm text-gray-500 mr-2">全套申报</text>
            <view class="relative inline-flex items-center cursor-pointer">
              <checkbox id="fullReportToggle" v-model="fullReport" class="sr-only peer" checked />
              <view class="w-9 h-5 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-primary"></view>
            </view>
          </view>
        </view>
      </view>

      <!-- 进度指示器 -->
      <view class="py-4">
        <view class="flex justify-between items-center mb-2">
          <text class="text-sm font-medium text-gray-500">申报进度</text>
          <text class="text-xs text-primary">已完成 2/4</text>
        </view>
        <view class="flex items-center space-x-1">
          <view class="flex-1">
            <view class="h-2 bg-primary rounded-full"></view>
            <text class="text-xs text-center mt-1 text-primary">记账</text>
          </view>
          <view class="flex-1">
            <view class="h-2 bg-primary rounded-full"></view>
            <text class="text-xs text-center mt-1 text-primary">发票</text>
          </view>
          <view class="flex-1">
            <view class="h-2 bg-gray-200 rounded-full"></view>
            <text class="text-xs text-center mt-1 text-gray-500">报表</text>
          </view>
          <view class="flex-1">
            <view class="h-2 bg-gray-200 rounded-full"></view>
            <text class="text-xs text-center mt-1 text-gray-500">申报</text>
          </view>
        </view>
      </view>

      <!-- 主要功能区 -->
      <view class="py-4">
        <text class="text-sm font-medium text-gray-500 mb-3">主要功能</text>
        <view class="grid grid-cols-2 gap-3">
          <!-- 记账模块 -->
          <navigator url="/pageNew/pages/accounting/index" class="flex flex-col items-center justify-center bg-white rounded-lg shadow-card p-4 hover:shadow-lg transition-all duration-300">
            <view class="w-12 h-12 rounded-full bg-primary-light flex items-center justify-center text-primary mb-3">
              <text class="fa fa-calculator text-xl"></text>
            </view>
            <text class="text-base font-medium mb-1">记账管理</text>
            <text class="text-xs text-gray-500 text-center">记录收入支出，管理财务流水</text>
          </navigator>
          
          <!-- 发票管理模块 -->
          <navigator url="/pageNew/pages/invoice/index" class="flex flex-col items-center justify-center bg-white rounded-lg shadow-card p-4 hover:shadow-lg transition-all duration-300">
            <view class="w-12 h-12 rounded-full bg-warning bg-opacity-10 flex items-center justify-center text-warning mb-3">
              <text class="fa fa-file-text-o text-xl"></text>
            </view>
            <text class="text-base font-medium mb-1">发票管理</text>
            <text class="text-xs text-gray-500 text-center">管理发票，自动识别，一键认证</text>
          </navigator>
          
          <!-- 员工管理模块 -->
          <navigator url="/pageNew/pages/employee/index" class="flex flex-col items-center justify-center bg-white rounded-lg shadow-card p-4 hover:shadow-lg transition-all duration-300">
            <view class="w-12 h-12 rounded-full bg-secondary-light flex items-center justify-center text-secondary mb-3">
              <text class="fa fa-users text-xl"></text>
            </view>
            <text class="text-base font-medium mb-1">员工管理</text>
            <text class="text-xs text-gray-500 text-center">管理员工信息，维护员工档案</text>
          </navigator>
          
          <!-- 工资管理模块 -->
          <navigator url="/pageNew/pages/salary/index" class="flex flex-col items-center justify-center bg-white rounded-lg shadow-card p-4 hover:shadow-lg transition-all duration-300">
            <view class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 mb-3">
              <text class="fa fa-money text-xl"></text>
            </view>
            <text class="text-base font-medium mb-1">工资管理</text>
            <text class="text-xs text-gray-500 text-center">管理工资发放，自动计算个税</text>
          </navigator>
          
          <!-- 税务申报模块 -->
          <navigator url="/pageNew/pages/tax/index" class="flex flex-col items-center justify-center bg-white rounded-lg shadow-card p-4 hover:shadow-lg transition-all duration-300">
            <view class="w-12 h-12 rounded-full bg-danger bg-opacity-10 flex items-center justify-center text-danger mb-3">
              <text class="fa fa-credit-card text-xl"></text>
            </view>
            <text class="text-base font-medium mb-1">税务申报</text>
            <text class="text-xs text-gray-500 text-center">一键报税，自动计算税费</text>
          </navigator>
          
          <!-- 报表统计模块 -->
          <navigator url="/pageNew/pages/report/index" class="flex flex-col items-center justify-center bg-white rounded-lg shadow-card p-4 hover:shadow-lg transition-all duration-300">
            <view class="w-12 h-12 rounded-full bg-teal-100 flex items-center justify-center text-teal-600 mb-3">
              <text class="fa fa-bar-chart text-xl"></text>
            </view>
            <text class="text-base font-medium mb-1">报表统计</text>
            <text class="text-xs text-gray-500 text-center">财务报表，数据分析统计</text>
          </navigator>
        </view>
      </view>

      <!-- 财务概览 -->
      <view class="py-4">
        <text class="text-sm font-medium text-gray-500 mb-3">财务概览</text>
        <view class="grid grid-cols-3 gap-3">
          <view class="bg-white rounded-lg shadow-card p-4">
            <text class="text-xs text-gray-500 mb-1">本月收入</text>
            <view class="flex items-end">
              <text class="text-xl font-semibold">¥30,000</text>
              <text class="text-xs text-secondary ml-2 flex items-center">
                <text class="fa fa-arrow-up mr-1"></text>12.5%
              </text>
            </view>
          </view>
          <view class="bg-white rounded-lg shadow-card p-4">
            <text class="text-xs text-gray-500 mb-1">本月支出</text>
            <view class="flex items-end">
              <text class="text-xl font-semibold">¥15,000</text>
              <text class="text-xs text-danger ml-2 flex items-center">
                <text class="fa fa-arrow-up mr-1"></text>8.3%
              </text>
            </view>
          </view>
          <view class="bg-white rounded-lg shadow-card p-4">
            <text class="text-xs text-gray-500 mb-1">本月利润</text>
            <view class="flex items-end">
              <text class="text-xl font-semibold">¥15,000</text>
              <text class="text-xs text-secondary ml-2 flex items-center">
                <text class="fa fa-arrow-up mr-1"></text>20.0%
              </text>
            </view>
          </view>
        </view>
      </view>

      <!-- 财务趋势图表 -->
      <view class="py-4">
        <view class="flex justify-between items-center mb-3">
          <text class="text-sm font-medium text-gray-500">财务趋势</text>
          <view class="flex space-x-2">
            <button class="trend-btn text-xs px-2 py-1 bg-primary text-white rounded-full" :class="{ 'bg-primary text-white': trendType === 'month', 'bg-gray-200 text-gray-500': trendType !== 'month' }" @click="changeTrendType('month')">月度</button>
            <button class="trend-btn text-xs px-2 py-1 bg-gray-200 text-gray-500 rounded-full" :class="{ 'bg-primary text-white': trendType === 'quarter', 'bg-gray-200 text-gray-500': trendType !== 'quarter' }" @click="changeTrendType('quarter')">季度</button>
            <button class="trend-btn text-xs px-2 py-1 bg-gray-200 text-gray-500 rounded-full" :class="{ 'bg-primary text-white': trendType === 'year', 'bg-gray-200 text-gray-500': trendType !== 'year' }" @click="changeTrendType('year')">年度</button>
          </view>
        </view>
        <view class="bg-white rounded-lg shadow-card p-4">
          <canvas canvas-id="financialTrendChart" height="200"></canvas>
        </view>
      </view>

      <!-- 待办事项 -->
      <view class="py-4">
        <view class="flex justify-between items-center mb-3">
          <text class="text-sm font-medium text-gray-500">待办事项</text>
          <text class="text-xs text-danger">3项待办</text>
        </view>
        <view class="bg-white rounded-lg shadow-card">
          <view class="p-3 border-b border-gray-100 flex items-center">
            <view class="w-2 h-2 bg-danger rounded-full mr-2"></view>
            <text class="text-sm">10月增值税申报（剩余3天）</text>
            <navigator url="/pageNew/pages/tax/index" class="ml-auto text-xs text-primary">立即处理</navigator>
          </view>
          <view class="p-3 border-b border-gray-100 flex items-center">
            <view class="w-2 h-2 bg-warning rounded-full mr-2"></view>
            <text class="text-sm">员工工资表确认</text>
            <navigator url="/pageNew/pages/salary/index" class="ml-auto text-xs text-primary">立即处理</navigator>
          </view>
          <view class="p-3 flex items-center">
            <view class="w-2 h-2 bg-warning rounded-full mr-2"></view>
            <text class="text-sm">5张发票待认证</text>
            <navigator url="/pageNew/pages/invoice/index" class="ml-auto text-xs text-primary">立即处理</navigator>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      fullReport: true,
      trendType: 'month',
      chart: null
    };
  },
  onLoad() {
    console.log('首页加载完成');
    this.initFinancialTrendChart();
  },
  onReady() {
    // 页面渲染完成
  },
  methods: {
    // 初始化财务趋势图表
    initFinancialTrendChart() {
      try {
        const ctx = uni.createCanvasContext('financialTrendChart', this);
        
        // 设置图表数据
        const labels = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月'];
        const incomeData = [22000, 25000, 28000, 24000, 26000, 29000, 32000, 28000, 30000, 30000];
        const expenseData = [12000, 14000, 15000, 13000, 16000, 17000, 18000, 16000, 15000, 15000];
        
        // 计算图表尺寸
        const chartWidth = uni.getSystemInfoSync().windowWidth - 32; // 减去左右padding
        const chartHeight = 200;
        const padding = 30;
        const innerWidth = chartWidth - padding * 2;
        const innerHeight = chartHeight - padding * 2;
        
        // 计算数据范围
        const maxValue = Math.max(...incomeData, ...expenseData) * 1.1;
        const minValue = 0;
        const valueRange = maxValue - minValue;
        
        // 绘制网格线
        ctx.setStrokeStyle('#f0f0f0');
        ctx.setLineWidth(1);
        
        // 垂直网格线
        for (let i = 0; i < labels.length; i++) {
          const x = padding + (i / (labels.length - 1)) * innerWidth;
          ctx.beginPath();
          ctx.moveTo(x, padding);
          ctx.lineTo(x, chartHeight - padding);
          ctx.stroke();
        }
        
        // 水平网格线
        const gridLines = 5;
        for (let i = 0; i <= gridLines; i++) {
          const y = chartHeight - padding - (i / gridLines) * innerHeight;
          ctx.beginPath();
          ctx.moveTo(padding, y);
          ctx.lineTo(chartWidth - padding, y);
          ctx.stroke();
          
          // 绘制数值标签
          const value = maxValue - (i / gridLines) * valueRange;
          ctx.setFillStyle('#999');
          ctx.setFontSize(10);
          ctx.fillText(`¥${Math.round(value).toLocaleString()}`, 5, y + 3);
        }
        
        // 绘制收入曲线
        ctx.setStrokeStyle('#1E88E5');
        ctx.setLineWidth(2);
        ctx.beginPath();
        
        for (let i = 0; i < incomeData.length; i++) {
          const x = padding + (i / (incomeData.length - 1)) * innerWidth;
          const y = chartHeight - padding - ((incomeData[i] - minValue) / valueRange) * innerHeight;
          
          if (i === 0) {
            ctx.moveTo(x, y);
          } else {
            ctx.lineTo(x, y);
          }
        }
        
        ctx.stroke();
        
        // 填充收入曲线下方区域
        ctx.setFillStyle('rgba(30, 136, 229, 0.1)');
        ctx.lineTo(padding + ((incomeData.length - 1) / (incomeData.length - 1)) * innerWidth, chartHeight - padding);
        ctx.lineTo(padding, chartHeight - padding);
        ctx.closePath();
        ctx.fill();
        
        // 绘制支出曲线
        ctx.setStrokeStyle('#F44336');
        ctx.setLineWidth(2);
        ctx.beginPath();
        
        for (let i = 0; i < expenseData.length; i++) {
          const x = padding + (i / (expenseData.length - 1)) * innerWidth;
          const y = chartHeight - padding - ((expenseData[i] - minValue) / valueRange) * innerHeight;
          
          if (i === 0) {
            ctx.moveTo(x, y);
          } else {
            ctx.lineTo(x, y);
          }
        }
        
        ctx.stroke();
        
        // 填充支出曲线下方区域
        ctx.setFillStyle('rgba(244, 67, 54, 0.1)');
        ctx.lineTo(padding + ((expenseData.length - 1) / (expenseData.length - 1)) * innerWidth, chartHeight - padding);
        ctx.lineTo(padding, chartHeight - padding);
        ctx.closePath();
        ctx.fill();
        
        // 绘制标签
        ctx.setFillStyle('#333');
        ctx.setFontSize(10);
        
        for (let i = 0; i < labels.length; i++) {
          const x = padding + (i / (labels.length - 1)) * innerWidth;
          ctx.fillText(labels[i], x - 10, chartHeight - 15);
        }
        
        // 绘制图例
        ctx.setFillStyle('#1E88E5');
        ctx.fillRect(padding, 10, 10, 10);
        ctx.setFillStyle('#333');
        ctx.fillText('收入', padding + 15, 18);
        
        ctx.setFillStyle('#F44336');
        ctx.fillRect(padding + 60, 10, 10, 10);
        ctx.setFillStyle('#333');
        ctx.fillText('支出', padding + 75, 18);
        
        ctx.draw();
        console.log('财务趋势图表初始化成功');
      } catch (error) {
        console.error('初始化图表失败:', error);
      }
    },
    
    // 切换趋势图表类型
    changeTrendType(type) {
      this.trendType = type;
      // 重新初始化图表
      this.initFinancialTrendChart();
    },
    
    // 显示通知
    showNotification() {
      uni.showToast({
        title: '通知功能即将上线',
        icon: 'none'
      });
    },
    
    // 显示设置
    showSettings() {
      uni.showToast({
        title: '设置功能即将上线',
        icon: 'none'
      });
    },
    
    // 切换公司
    switchCompany() {
      uni.showToast({
        title: '当前仅支持绑定一个公司',
        icon: 'none'
      });
    }
  }
};
</script>

<style>
/* 引入全局样式 */
page {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* 自定义样式 */
.container {
  width: 100%;
  max-width: 750rpx;
  margin: 0 auto;
}

.shadow-card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.bg-primary {
  background-color: #1E88E5;
}

.text-primary {
  color: #1E88E5;
}

.bg-primary-light {
  background-color: #E3F2FD;
}

.bg-secondary {
  background-color: #4CAF50;
}

.text-secondary {
  color: #4CAF50;
}

.bg-secondary-light {
  background-color: #E8F5E9;
}

.bg-danger {
  background-color: #F44336;
}

.text-danger {
  color: #F44336;
}

.bg-warning {
  background-color: #FF9800;
}

.text-warning {
  color: #FF9800;
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.duration-300 {
  transition-duration: 300ms;
}
</style>
